import React, {useState} from 'react';
import {
  View,
  TextInput,
  Image,
  TouchableWithoutFeedback,
  StyleSheet,
} from 'react-native';
import PropTypes from 'prop-types';

const visibleImg = require('../image/icon_visible.png');
const unvisibleImg = require('../image/icon_unvisible.png');

const PasswordInputText = ({iconSize, label, style, getRef, ...rest}) => {
  const [eyeIcon, setEyeIcon] = useState(unvisibleImg);
  const [isPassword, setIsPassword] = useState(true);

  const changePwdType = () => {
    setEyeIcon(isPassword ? visibleImg : unvisibleImg);
    setIsPassword(prevState => !prevState);
  };

  const passRef = ref => {
    if (getRef) {
      getRef(ref);
    }
  };

  return (
    <View
      style={[
        style,
        {
          flex: 1,
          alignItems: 'center',
          flexDirection: 'row',
          justifyContent: 'space-between',
        },
      ]}>
      <TextInput
        {...rest}
        style={{flex: 1, color: '#FFF'}}
        placeholderTextColor={'#FFF'}
        maxLength={12}
        ref={passRef}
        secureTextEntry={isPassword}
        // value={label}
      />
      <TouchableWithoutFeedback onPress={changePwdType}>
        <Image style={{width: iconSize, height: iconSize}} source={eyeIcon} />
      </TouchableWithoutFeedback>
    </View>
  );
};

const styles = StyleSheet.create({
  icon: {
    position: 'absolute',
    top: 33,
    right: 0,
  },
});

PasswordInputText.defaultProps = {
  iconSize: 22,
  label: 'Password',
};

PasswordInputText.propTypes = {
  iconSize: PropTypes.number,
  label: PropTypes.string,
};

export default PasswordInputText;
